<template>
  <div class="navbar">
    <div class="logo">
      <span class="title-img"></span>
      <span class="title-label">{{titleName}}</span>
    </div>
    <div v-show="mapCol == 24" class="map-but">
      <hamburger
        :toggle-click="toggleSideBar"
        :is-active="sidebar.opened"
        class="hamburger-container"
      />
      <map-button></map-button>
    </div>
    <div class="right-menu">
      <Menu ref="Menu"></Menu>
      <span class="el-icon-search search"></span>
      <el-dropdown class="avatar-container right-menu-item" trigger="hover">
        <div class="right-menus icon_user">
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="(item, i) in planList" :key="i">
            <span style="display:block;" @click="goPathP(item)">{{item.name}}</span>
          </el-dropdown-item>
          <el-dropdown-item divided>
            <span style="display:block;" @click="logout">{{ $t('navbar.logOut') }}</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
import logo_png from "@/assets/logo.png";
import user_png from "@/assets/user.png";
import Hamburger from "@/components/Hamburger";
import Menu from "@/components/Menu";
import MapButton from "@/components/MapButton";
import { mapGetters } from "vuex";
export default {
  components: { Hamburger, MapButton, Menu },
  data() {
    return {
      logo_png: logo_png,
      user_png: user_png,
      titleName: '杰狮自然资源一体化审批系统',
      planList: [
         {
          key: "home",
          name: "首页",
          path: "/home",
        },
        {
          key: "yzt",
          name: "平台门户",
          path: "/gmap/map2D",
        },
        {
          key: "personalCenter",
          name: "个人中心",
          path: "/personalCenter/index",
          children: [
            {
              index: 1,
              key: "personalCenter",
              value: "个人中心"
            }
          ]
        },
        // {
        //   key: "bdgl",
        //   name: "后台管理",
        //   path: '/formmanagement/index',
        //   // path:'/formmanagement',
        //   children: [
        //     {
        //       index: 1,
        //       key: "personalCenter",
        //       value: '表单管理'
        //     }
        //   ]
        // }
        {
          key: "bdgl",
          name: "后台管理",
          path: '/formmanagement',
          // path:'formbus/businesstable/index'
        }
      ]
    };
  },
  computed: {
    language() {
      return this.$store.getters.language
    },
    sidebar() {
      return this.$store.getters.sidebar;
    },
    dot_value: function() {
      return this.$store.getters.notice;
    },
    hidden: function() {
      return !this.dot_value > 0;
    },
    mapCol() {
      return this.$store.state.app.mapCol;
    },
    ...mapGetters(["sidebar", "realname"])
  },
  watch: {
    
  },
  methods: {
    logout() {
      this.$store.dispatch("LogOut").then(() => {
        location.reload();
      });
    },
    changLang:function(lang) {
        this.$i18n.locale = lang
        this.$store.dispatch("setLanguage",lang)
        //this.$router.go(0)
    },
    toggleSideBar() {
      const store = this.$store;
      this.$store.dispatch("toggleSideBar").then(function() {
        Object.keys(store.state.app.chartListener).forEach(key => {
          store.state.app.chartListener[key].resize();
        });
      });
    },
    //主菜单
    goPathP(item){
      window.localStorage.setItem("menuIndex", 0);
      this.setKey(item.key);
      this.$router.push({ path: item.path });
    },
    setKey(key) {
      this.$store.dispatch("moduleKey", key);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";

.navbar {
    background: #000000;
    width: 100%;
    box-sizing: border-box;
    height: 64px;
    line-height: 64px;
    display: flex;
    padding: 0 20px;
    .logo {
      color: #fff;
      margin-top: 4px;
      margin-right: 30px;
      display: flex;
      align-items: center;
      // margin-top: 5px;
      // width: 339px;
      // height: 50px;
      // float: left;
      // background: url(../../assets/logo.png) center no-repeat;
       .title-img {
        display: inline-block;
        width: 32px;
        height: 32px;
        background: url(../../assets/shouye/logo.png) no-repeat;
        background-size: 100% 100%;
        margin-right: 6px;
      }
      .title-label {
        font-size: 24px;
        font-weight: 600;
        letter-spacing: 1px;
      }
    }

    .map-but {
        height: 100%;
    }

    .el-dropdown {
        padding: 0 10px;
        height: 100%;
    }

    .hamburger-container {
        line-height: 64px;
        height: 64px;
        float: left;
        padding: 0 10px;
    }

    .breadcrumb-container {
        float: left;
    }

    .errLog-container {
        display: inline-block;
        vertical-align: top;
    }

    .right-menu {
        flex: 1;
        height: 64px;
        display: flex;

        &:focus {
            outline: none;
        }

        .el-badge {
            vertical-align: inherit;
        }

        .right-menus {
            margin-left: 25px;
            transition: 0.3s ease-in;
            margin: 0 10px;
            height: 64px;
            position: relative;

            a {
                display: inline-block;
                color: #d9e6f3;
                opacity: 0.8;
                font-size: 14px;
                position: relative;
                height: 64px;
                line-height: 64px;
            }

            span {
                position: absolute;
                width: 22px;
                height: 22px;
                line-height: 22px;
                background: #ff0500;
                border-radius: 50%;
                color: #fff;
                font-size: 12px;
                text-align: center;
                top: 0;
                left: -11px;
            }
        }

        .right-menus:hover {
            opacity: 1;
        }

        .right-menus.icon_message {
            background: url(../../assets/ico_message.png) left center no-repeat;
        }

        .right-menus.icon_user {
          display: inline-block;
          width: 30px;
          height: 30px;
          background: url(../../assets/icon_user.png) no-repeat;
          background-size: 100% 100%;
          margin-bottom: -8px;
          background-position: 100% 100%;
        }

        .right-menu-item {
            display: inline-block;
            margin: 0 8px;
        }

        .screenfull {
            height: 20px;
        }

        .international {
            vertical-align: top;
        }

        .theme-switch {
            vertical-align: 15px;
        }

        .search {
          color: #fff;
          font-size: 25px;
          line-height: 64px;
          cursor: pointer;
          &:hover {
            color: #0085ff;
          }
        }

        .avatar-container {
            height: 64px;
            // width: 105px;
            margin-left: auto;

            .avatar-wrapper {
                margin-top: 5px;
                position: relative;

                .user-avatar {
                    cursor: pointer;
                    width: 40px;
                    height: 40px;
                    border-radius: 10px;
                }

                .el-icon-caret-bottom {
                    cursor: pointer;
                    position: absolute;
                    right: -20px;
                    top: 25px;
                    font-size: 12px;
                }
            }
        }
    }
}
</style><style lang="scss">
.right-menu .el-badge__content.is-fixed {
    right: auto;
    left: 23px;
    top: 0;
    transform: none;
}

.right-menu .el-badge {
    cursor: pointer;
}

.right-menu .el-badge:hover .right-menus {
    opacity: 1;
}

.right-menu .el-badge__content {
    width: 20px;
    height: 20px;
    line-height: 20px;
    border: 0;
    border-radius: 50%;
    padding: 0;
}

.navbar svg.hamburger {
    vertical-align: middle;
    fill: #fff;
    opacity: 0.8;
    transition: 0.3s ease-in;
    transition-property: opacity;
}

.navbar svg.hamburger:hover {
    opacity: 1;
}

.navbar .el-dropdown svg.svg-icon {
    vertical-align: middle;
    color: #fff;
    opacity: 0.8;
    transition: 0.3s ease-in;
    transition-property: opacity;
}

.navbar .el-dropdown svg.svg-icon:hover {
    opacity: 1;
}
</style>